<template>
	<view class="pro-list">
		<view class="item" @click="$emit('tapItem',index)" v-for='(item, index) in list' :key='index'>
			<image class="avatar" :src="item.goods_headimg" mode="aspectFill"></image>
			<view class="info">
				<view class="caption">{{item.goods_name}}</view>
				<view class="label" v-if="label && item.goods_code">本店</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array
			},
			label: {
				type: Boolean,
				default: false
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';
	
	.pro-list{
		@include box-w(100%);
		padding:0 32rpx;
		.item{
			@include box-h(202rpx);
			@include flex-row();
			border-top: 2rpx solid $bg-d;
			&:last-of-type{
				border-bottom: 2rpx solid $bg-d;
			}
			.avatar{
				@include square(140rpx);
				border-radius:12rpx;
				box-shadow: 0 0 10rpx $bg-f;
			}
			.info{
				@include box(516rpx, 140rpx);
				margin-left:30rpx;
				.caption{
					@include font-set($font-a, $color-c);
					margin-top: 12rpx;
				}
				.label{
					margin-top:26rpx;
					@include box(84rpx, 40rpx, $bg-a);
					border-radius:22rpx;
					@include flex-row();
					@include font-set($font-c, $color-a);
				}
			}
		}
	}
</style>
